<template>
  <div id="app">
    <div class="menu" v-if="userid != ''">
      <el-menu
        :default-active="$route.path"
        router
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <img
          src="http://www.cque.edu.cn/d-img/logo.png"
          alt=""
          class="logo"
        />
        <el-menu-item index="/home">首页</el-menu-item>
        <el-menu-item v-if="roleid == 1" index="/info">信息</el-menu-item>
        <el-menu-item v-if="roleid == 1" index="/records"
          >提交记录</el-menu-item
        >
        <el-menu-item index="" @click="logout">退出</el-menu-item>
        <div class="info">
          {{ username }}
          :欢迎使用
        </div>
      </el-menu>
      <div class="line"></div>
    </div>
    <div class="main">
      <router-view />
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "app",
  data() {
    return {
      name: "",
    };
  },
  computed: {
    ...mapState({
      username: (state) => state.name,
      roleid: (state) => state.role,
      userid: (state) => state.user_id,
    }),
    onRoutes() {
      console.log(this.$route.path); // eg ： 输出 /log
      return this.$route.path.replace("/", "");
    },
  },
  methods: {
    handleSelect(key, keyPath) {
      // this.$router.push(keyPath)
    },
    logout() {
      this.$confirm("是否退出系统", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.$store.commit("setUserId", "");
          this.$store.commit("setName", "");
          this.$store.commit("setUserinfo", {});
          this.$store.commit("setRole", "");
          this.$router.push({
            name: "login",
          });
        })
        .catch(() => {});
    },
  },
  mounted() {
    // this.getUserInfo();
  },
  created() {
    //在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem("store")) {
      this.$store.replaceState(
        Object.assign(
          {},
          this.$store.state,
          JSON.parse(sessionStorage.getItem("store"))
        )
      );
    }
    //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload", () => {
      sessionStorage.setItem("store", JSON.stringify(this.$store.state));
    });
    // 登录验证
    if (!this.userid) {
      this.$router.push({
        name: "login",
      });
    }
  },
};
</script>

<style>
body {
  margin: 0;
}
.main {
  margin: 8px;

}
.logo {
  float: left;
  margin-left: 30px;
}

.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
    outline: 0;
    color: #303133 !important;
}

/* hover时的背景色 */
.el-menu--horizontal>.el-menu-item:not(.is-disabled):focus, .el-menu--horizontal>.el-menu-item:not(.is-disabled):hover, .el-menu--horizontal>.el-submenu .el-submenu__title:hover {
    background-color: hsla(0,0%,100%,.23) !important;
}

.el-menu--horizontal>.el-menu-item {
  height: 73px !important;
  line-height: 73px !important;
  margin-left: 30px !important;
  color: aliceblue !important;
}
.el-menu {
  background-color: #459fff !important;
  color: aliceblue;
}

.info {
  float: right;
  line-height: 73px;
  margin-right: 20px;
}
</style>
